﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FormDesigner.aspx.cs" Inherits="ZX.Web.UI.Controls.BasePage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="template/matrix-1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="template/matrix-1/css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="template/matrix-1/css/fullcalendar.css" />
    <link rel="stylesheet" href="template/matrix-1/css/matrix-style.css" />
    <link rel="stylesheet" href="template/matrix-1/css/matrix-media.css" />
    <link href="template/matrix-1/font-awesome/css/font-awesome.css" rel="stylesheet" />
    <style type="text/css">
        .tab-pane .tab_contents
        {
            /*height: 700px;*/
            overflow: auto;
            margin: 0px;
        }
        
        #directionContainer ul{
            margin:0px;
            padding: 0px 0px 0px 20px;
        }
        
        .tab-pane .tab_contents .main{
            width:1024px;
        }
        .tab-pane .tab_contents .left{
            width:200px;
            height: 50px;
            float:left;
            margin-right:4px;
        }
        .tab-pane .tab_contents .right{
            width:800px;
        }
         #directionWrapper{
            padding:15px 7px;
            width:200px;
            border:1px solid #CCC;
         }
        
        #directionContainer
        {  
           height:600px;
           overflow:auto;
        }
        .directionTitle{
            font-weight: bold;
            width:200px;
            font-size: 14px;
            padding-bottom:3px;
            border-bottom: 1px dashed #ccc;
        }
        .sectionItem{
            height:20px;
            padding: 4px;
        }
        .sectionItem span{
            *zoom:1;
            display:inline-block;
        }
        .itemTitle{
            _float:left;
        }
        .tab-pane .tab_contents .selectIcon, .tab-pane .tab_contents .deleteIcon, .tab-pane .tab_contents .moveUp, .tab-pane .tab_contents .moveDown{
            float:right;
            color:red;
            font-size:0px;
            line-height: 20px;
            height:20px;
            text-align: center;
            cursor: pointer;
        }
         .tab-pane .tab_contents .selectIcon, .tab-pane .tab_contents .moveUp,  .tab-pane .tab_contents .moveDown{
            width:14px;
            font-size:10px;
        }
        .tab-pane .tab_contents  .selectIcon:hover, .tab-pane .tab_contents .moveUp:hover, .tab-pane .tab_contents .moveDown:hover{
            text-decoration: underline;
        }
       .deleteIcon{
            width:20px;
            margin-left:3px;
            background: url(../themes/default/images/icons-all.gif) 0 -89px;
        }
        .tab-pane .tab_contents  .fixTop{
            position: fixed;
            top: -1px;
        }
        button 
        {
            margin-left:5px;
        }
    </style>
    <script src="template/matrix-1/js/jquery.min.js" type="text/javascript"></script>
    <script src="editor/ueditor.config.js" type="text/javascript"></script>
    <script src="FormDesigner/editor_api.js" type="text/javascript"></script>
</head>
<body>
    <div class="widget-box" style="padding: 0px; margin: 0px;">
        <div class="widget-title">
            <div class="nav" style="padding-top: 5px; margin-top: 5px; padding-left: 10px;">
                <button id="btnSetDetailTable" class="btn btn-info">
                    设置明细表</button>
                <button id="btnOneColumnTemplate" class="btn btn-info">
                        单行模版</button>
                <button id="btnTwoColumnTemplate" class="btn btn-info">
                            双行模版</button>
                <button id="btnThreeColumnTemplate" class="btn btn-info">
                                三行模版</button>
                <button id="btnView" class="btn btn-primary">
                                    预览</button>
                <button id="btnSave" class="btn btn-primary">
                                    保存</button>
                <button id="btnCancel" class="btn btn-primary">
                                        取消</button>
            </div>
        </div>
        <div id="_main" class="widget-content tab-content" style="padding: 2px; margin: 2px;">
            <div id="tab2" class="tab-pane active">
                <div class="tab_contents">
                    <div class="main">
                        <div class="left">
                            <div class="widget-box" style="padding: 0px; margin: 0px;">
                                <div class="widget-title">
                                    <ul class="nav nav-tabs">
                                        <li class="active"><a data-toggle="tab" href="#tab3">主表字段</a></li>
                                        <li><a data-toggle="tab" href="#tab4">明细设置</a></li>
                                    </ul>
                                </div>
                                <div id="_sub" class="widget-content tab-content">
                                    <div id="tab3" class="tab-pane active">
                                        <div class="tab_contents" style="padding: 0px; margin: 0px;" id="directionContainer">
                                            <%-- <div id="directionWrapper"> --%>
                                            <%--                                            <div class="directionTitle">
                                                    主表字段：</div>--%>
                                        </div>
                                    </div>
                                    <div id="tab4" class="tab-pane">
                                        <div class="tab_contents">
                                            <div id="Div2">
                                                ddddf
                                                <div id="Div3">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <script id="content" type="text/plain" style="width: 900px;"> </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form id="form1" runat="server">
    </form>
    <script src="template/matrix-1/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="template/matrix-1/js/jquery.ui.custom.js" type="text/javascript"></script>
    <script src="template/matrix-1/js/matrix.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.form.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.action.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.data.js" type="text/javascript"></script>
    <script type="text/javascript">
        var _maintable = getPar1("table");//表
        var _formid = getPar1("formid");  //表单ID
        if(_maintable == "")
        {
            _maintable = "datPost"; 
        }
        
        var editor;
        function insert(e, f) {
            var datatype = $(e).parent().attr("datatype");
            var caption = $(e).parent().find("span:eq(0)").html();
            var maxlength = $(e).parent().attr("maxlength");
            var id = $(e).parent().attr("id");
            if (f == "t") {
                editor.execCommand('insertHtml', caption);
            }
            else {
                var strInput = "<input id=\"{0}\" datatype=\"{1}\" name=\"{0}\" placeholder=\"{2}\" maxlength=\"{3}\"/>";
                strInput = strInput.replace("{0}", id).replace("{0}", id).replace("{1}", datatype).replace("{2}", caption).replace("{3}",maxlength);
                editor.execCommand('insertHtml', strInput); return true;
            }
        }

        function insertCtrl() {
            
        }

        $(function () {
            editor = UE.getEditor('content');
            editor.addListener('contentchange', function () {
                this.sync();
            });

            $(".tab-pane .tab_contents").height($(window).height() - 45);
            //$("#_main").height($(document).height() - 51);
            $("#_sub").height($(window).height() - 100);
            $("#tab3").height($(window).height() - 100);
            BulidCtrlListByTable();

            $("#btnOneColumnTemplate").bind("click", function () {
                var entity = fnGetData("V_TableField", "TableName='" + _maintable + "' and PKey='N'","Sort");
                fnBuliderTable(entity.rows, 1);
            });

            $("#btnTwoColumnTemplate").bind("click", function () {
                var entity = fnGetData("V_TableField", "TableName='" + _maintable + "' and PKey='N'", "Sort");
                fnBuliderTable(entity.rows, 2);
            });

            $("#btnThreeColumnTemplate").bind("click", function () {
                var entity = fnGetData("V_TableField", "TableName='" + _maintable + "' and PKey='N'", "Sort");
                fnBuliderTable(entity.rows, 3, "950px");
            });
            
           // editor.setHeight($(window).height() - 45-100);
        })

        //获取表结构
        function GetTableStucInfo(mainTable) {
            //debugger
            var entity = fnGetData("V_TableField", "TableName='" + mainTable + "'","Sort");
            if (entity != null) {
                //return entity.rows[0];
                return entity.rows;
            }
            return null;
        }


        function BulidCtrlListByTable() {
            //debugger
            //var table = getPar1("table");
            var table = arguments[0] || _maintable;
            var data = GetTableStucInfo(table);
            BulidCtrlList(data);
        }

        //生成对应控件列表
        function BulidCtrlList(data) {
            if (data == null) {
                return;
            }
            for (var i = 0; i < data.length; i++) {
                $("#directionContainer").append("<div id=\"" + data[i].FieldName + "\" datatype=\"" + data[i].FiledType + "\" field=\"" + data[i].FieldName + "\" maxlength=\"" + data[i].Length + "\" required=\"" + data[i].CanNull + "\"><span >" + data[i].ColDesc + "</span><span style=\"color:red\"  onclick=\"javascript:insert(this,'t');\">[文]</span><span style=\"color:red\"  onclick=\"javascript:insert(this,'c');\">[控]</span></div>");
            }
        }

        //
        function SetTable() { }


        $(window).resize(function () {
            $(".tab-pane .tab_contents").height($(window).height() - 51);
            //$("#_sub").height($(window).height() - 51);
            $("#_sub").height($(window).height() - 100);
            $("#tab3").height($(window).height() - 100);
        });

        //保存
        function fnSave() {
            
        }

        //
        function fnSetDetailTable() {
        
        }

        //生成主表模版
        function fnBuliderTable(data, columns) {
            var width = arguments[2] || "800px";
            var rows = parseInt(data.length / columns);
            rows += (data.length % columns) > 0 ? 1 : 0;
            var strHtml = "<table style=\"width:"+width+"\"><tbody><tr class=\"firstRow\"><td align=\"center\"  style=\"background-color: rgb(219, 229, 241);\" colspan=\"" + columns * 2 + "\">标题</td></tr>";

            var ctrlHtml = "";
            for (var i = 0; i < data.length; i++) {
                if (i % columns == 0 && i ==0) {
                    strHtml += "<tr>";
                }
                else {
                    if (i % columns == 0) {
                        strHtml += "</tr><tr>";
                    }
                }

                //
                if (data[i].Length > 200 || data[i].FiledType == "text") {
                    ctrlHtml = "<textarea id=\"" + data[i].FieldName + "\" datatype=\"" + data[i].FiledType + "\" name=\"" + data[i].FieldName + "\" placeholder=\"" + data[i].ColDesc + "\" maxlength=\"" + data[i].Length + "\" required=\"" + data[i].CanNull + "\"/></textarea>";
                }
                else {

                    ctrlHtml = "<input id=\"" + data[i].FieldName + "\" datatype=\"" + data[i].FiledType + "\" name=\"" + data[i].FieldName + "\" placeholder=\"" + data[i].ColDesc + "\" maxlength=\"" + data[i].Length + "\" required=\"" + data[i].CanNull + "\"/>";
                }

                if (i == data.length - 1) {
                    if (i % columns > 0) {
                        strHtml += "<td  style=\"width:120px\" class=\"colstitle\">" + data[i].ColDesc + "</td><td  colspan=\"" + (parseInt((columns - (i % columns))) * 2 - 1) + "\">" + ctrlHtml + "</td>";
                    }
                    else {
                        strHtml += "<td style=\"width:120px\" class=\"colstitle\">" + data[i].ColDesc + "</td><td class=\"colscontent\">" + ctrlHtml + "</td>";
                    }
                    strHtml == "</tr>";
                }
                else {
                    strHtml += "<td class=\"colstitle\">" + data[i].ColDesc + "</td><td class=\"colscontent\">" + ctrlHtml + "</td>";

                }
                //$("#directionContainer").append("<div id=\"" + data[i].FieldName + "\" datatype=\"" + data[i].FieldType + "\" field=\"" + data[i].FieldName + "\" maxlength=\"" + data[i].Length + "\" required=\"" + data[i].CanNull + "\"><span >" + data[i].ColDesc + "</span><span style=\"color:red\"  onclick=\"javascript:insert(this,'t');\">[文]</span><span style=\"color:red\"  onclick=\"javascript:insert(this,'c');\">[控]</span></div>");
            }
            strHtml += "</tbody></table>";
            editor.execCommand('insertHtml', strHtml);
        }
    </script>
</body>
</html>
